<template>
    <el-menu-item v-if="item.children.length == 0" :index="item.path"
        @click="handleMenuItemClick({ path: item.path, title: item.title })">
        <span style="margin-left: 10px;" :data-path="item.path">{{ item.title }}</span>
    </el-menu-item>

    <el-sub-menu v-else :index="item.title">
        <template #title>
            <div style="display: flex;">
                <i class="iconfont" v-html="item.ion"></i>
                <span style="margin-left: 15px;">{{ item.title }}</span>
            </div>
        </template>
        <MenuItem v-for="ele in item.children" :key="ele.id" :item="ele" />
    </el-sub-menu>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import type { IMenu } from "../../../types/index";
import { ref } from 'vue';
const router = useRouter();
// 修改 defineProps 的语法
const props = defineProps<{
    item: IMenu; // 定义 item 的类型为 IMenu
}>();

const pathss=ref<string>('&#xe600;');

const handleMenuItemClick = (item: any) => {
    router.replace({
        path: item.path,  // 假设你想要跳转到 `item.path`
    });
}

</script>